<template>
	<view >
		<view class="kefu" @click.stop="kf()" v-if="kefu&&cur_page!='pages/plugin/kefu/call'" :style="{color: app_color}">
			<view>
				<u-icon name="chat-fill" :color="unread>0?app_color:'#999'" size="22"></u-icon>
			</view>
		</view>
			<u-navbar 
					v-if="set.is_show==1&&set.showType==2"
					:autoBack="true"
					:safeAreaInsetTop="true"
					:placeholder="true"
					:fixed="true"
					:bgColor="set.bgColor"
					:direction="set.direction"
		        >
				<view slot="left">
					<!-- #ifndef MP-BAIDU -->
					<view v-if="rightSlot == true && backShow == true&&set.weizhi!='left'" style="padding: 2px;background-color: #fff;border-radius: 50%;" @click="goIndex">
						<u-icon name="home" size="16"></u-icon> 
					</view>
					<!-- #endif -->
					<view class="mx-nav-box" v-if="set.weizhi=='left'">
						<image @click.stop="iconToPage()" v-if="set.showIcon==1" class="moxi-top-nav-img" mode="aspectFit"
						 :src="set.icon"></image>
						<text class="moxi-nav-title" 
						:style="{color:set.titleColor,maxWidth:titleW()}">{{set.title}}</text>
					</view>
					
					<u-icon  :color="set.titleColor"
					 name="arrow-left" v-if="set.weizhi=='center'&&showBack&&appType!='alipay'"
					  :style="{color:set.titleColor}"></u-icon>
				
				</view>
				<view slot="center">
					<!-- #ifndef MP-ALIPAY -->
					<view class="mx-nav-box" v-if="set.weizhi=='center'">
						<image @click.stop="iconToPage()" v-if="set.showIcon==1" 
						class="moxi-top-nav-img" mode="aspectFit"
						 :src="set.icon"></image>
						<text class="moxi-nav-title"
						 :style="{color:set.titleColor,maxWidth:titleW()}">{{set.title}}</text>
					</view>
					<!-- #endif -->
				</view>
		</u-navbar>

	</view>
</template>

<script>
	export default {
		name:"moxi-nav",
		data() {
			return {
				app_color:"",
				showLogin:false,
				showBack:false,
				rightSlot:false,
				backShow:false,
				unread:0,
				kefu:false,//是否开启客服插件
				cur_page:""
			};
		},props:{
			set:{
				type:Object,
				default: ()=>{
					return {
						bgColor:[]
					};
				}
			}
		},
created() {
		this.cur_page = this.get_cur_page();
	
			this.app_color = this.$appData.data.app_color;
			this.appType = this.moxiConfig('appType')
			
			if(this.set.showType==1){
	
				uni.setNavigationBarColor({
				    frontColor: this.titleColor,
				    backgroundColor: this.bgColor[0]
				})
			}else{
				let page = getCurrentPages();
				const l = page.length;
					let abc = this.get_cur_page()
				if(l>1){
					if(abc == 'pages/index/index') {
						this.backShow = false
					} else {
						if(this.appType=='baidu'){
							this.showBack = false;
							if(page[l-2].route&&page[l-2].route.indexOf("pages/index/index")===0){
								if(page[l-1].route&&page[l-1].route.indexOf("pages/index/index")===0){
									this.showBack = true;
								}
							}
						}else{
							this.showBack = true;
						}
					}
					
					this.rightSlot = false
				} else {
					this.rightSlot = true
				
					if(abc == 'pages/index/index') {
						this.backShow = false
					} else {
						this.backShow = true
					}
				}
			}
			//处理客服消息
			this.isUnread();
			if(this.$appData.plugin&&this.$appData.plugin.kefu){
				if(!this.kefu){
					this.kefu = true;
				}
				setInterval(()=>{
					this.isUnread()
				},100)
			}
		},methods: {
			isUnread(){
				this.unread = this.$appData.unread;
			},
			kf(){
				this.navto('pages/plugin/kefu/call')
			},
			show(){
				this.showLogin = true;
			},
			goIndex(){
				this.navto('pages/index/index')
			},
			iconToPage(){
				
				if(this.set.iconPage.length){
					uni.navigateTo({
						url: this.set.iconPage
					});
				}
			},
			titleW(){
				if(this.set.searchBox==1&&this.set.weizhi=='left'){
					return "160rpx";
				}else{
					if(this.set.weizhi=='left'){
						return '430rpx';
					}
					return "300rpx";
				}
			}
		}
	}
</script>

<style>
	.kefu{
		position: fixed;right: 10px;bottom: 80px;z-index: 9;border-radius: 100px;
		background: #fff;display: flex;flex-direction: row;box-shadow: 0 0 5px #ccc;
		width: 30px;height: 30px;
		display: flex;align-items: center;justify-content: center;
	}
	.user-login{margin: 10px;min-height: 200px}
.moxi-top-nav-img{max-width: 21px;max-height: 21px;}
.mx-nav-box{display: flex;;flex-direction: row;}
.moxi-nav-title{font-size: 15px;line-height: 21px;margin-left: 5px;
text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
</style>